<template >

  <div id="app" class="homeWrap">
  <div style="z-index:100;position: fixed;box-shadow: 0 2px 4px rgba(24,23,23,12), 0 0 6px rgb(83,77,77);width: 100%">
    <el-menu
            :default-active="activeIndex"
            class="el-menu-demo"
            mode="horizontal"
            background-color="#545c64"
            text-color="#fff"
            active-text-color="#ffd04b">


      <el-submenu index="2">
        <template slot="title"><i class="el-icon-user-solid"></i>我的</template>
        <div style="position: relative;left: 10px;">
          <i style="color: white">头像：</i> <img style="width:50px; height:50px; border-radius:50%;;position: relative;top: 10px" :src="'http://127.0.0.1:9090/demo/'+this.topImg">
        </div>
        <br>
        <i style="color: white" class="el-icon-user-solid">当前角色：</i><label style="color: white;font-size: 10px">{{this.roleName}}</label>
        <br>
        <br>
        <el-menu-item style="color: red" index="2-3" @click="write">注销</el-menu-item>

      </el-submenu>

      <el-menu-item :index="m.id+''" @click="getmenuid(m.id)" v-for="m in childMenus"><i :class="m.icon"></i>{{m.mname}}</el-menu-item>
      <!--      <el-menu-item index="3">消息中心</el-menu-item>-->
      <!--      <el-menu-item index="4"><a  target="_blank">订单管理</a></el-menu-item>-->


    </el-menu>
  </div>

    <div style="width: 100%;background-color: #1F2937">

    </div>

    <el-container style="height:100%">
      <el-aside
              v-loading="loading"
              element-loading-text="拼命加载中"
              element-loading-spinner="el-icon-loading"
              element-loading-background="rgba(0, 0, 0, 0.8)"
              width="200px"
              style="z-index:50;box-shadow: 0 2px 4px rgb(0,0,0), 0 0 6px rgb(0,0,0)">
        <el-radio-group v-model="isCollapse" style="margin-bottom: 20px;">
          <el-radio-button :label="false"><i class="el-icon-circle-plus">&nbsp;展开</i></el-radio-button>
          <el-radio-button :label="true"><i class="el-icon-remove">&nbsp;收起</i></el-radio-button>
        </el-radio-group >


        <el-menu default-active="1-4-1" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" :collapse="isCollapse" style="position: relative;top: -50px"  background-color="#545c64" text-color="#fff" active-text-color="#ffd04b">
          <el-submenu :index="m.id+''" v-for="m in childMenus02">
            <template slot="title">
              <i :class="m.icon"></i>
              <span slot="title" style="color: #bebec1">{{m.mname}}</span>
            </template>
            <el-menu-item-group >
              <el-menu-item v-for="ms in m.childMenus"  v-if="ms.childMenus == ''" :index="ms.id+''" @click="addTab(ms.mname,ms.linkUil)" size="small" >
                <span slot="title" style="font-size: 6px" :class="ms.icon" >{{ms.mname}}</span>
              </el-menu-item>

              <el-submenu v-if="mxs.childMenus != ''" :index="mxs.id+''" v-for="mxs in m.childMenus" >
                <template slot="title" >
                  <span :class="mxs.icon" style="font-size: 6px;position: relative;left: -12px" >{{mxs.mname}}</span>
                </template>
                <el-menu-item :index="mss.id+''" v-for="mss in mxs.childMenus"  @click="addTab(mss.mname,mss.linkUil)">
                  <span  slot="title" style="font-size: 1px" :class="mss.icon"  size="small">{{mss.mname}}</span>
                </el-menu-item>
              </el-submenu>
            </el-menu-item-group>


          </el-submenu>

        </el-menu>

      </el-aside>
      <el-container>
        <el-header style="background-color:#e2e2e2;z-index:20;width:100%;box-shadow: 0 2px 4px rgb(0,0,0), 0 0 6px rgb(0,0,0);position: relative;top: 62px">
        <div>
          <el-tabs style="color: #323030; height: 300px; width: 100%;caret-color: transparent;"
                   v-model="editableTabsValue"  id="tabs"  type="card"  @tab-remove="removeTab">
            <br class="tab">
            <el-tab-pane
                    :key="editableTabs[0].name"
                    :label="editableTabs[0].title"
                    :name="editableTabs[0].name"
            >
              <StatisticalView></StatisticalView>
            </el-tab-pane>
            <el-tab-pane  closable
                          v-for="(item, index) in editableTabs.slice(1)"
                          :key="item.name"
                          :label="item.title"
                          :name="item.name"

            >
              <component :is="item.content"></component>
            </el-tab-pane>

          </el-tabs>
        </div>

        </el-header>
        <el-main>

        </el-main>
      </el-container>
    </el-container>

  </div>
</template>


<script>

  import Staff from "./staff/Staff";
  //仓库管理
  import WarehouseInfoList from "../lifukang/components/management_warehouseInfo/WarehouseInfoList";
  import checkWarehouseInfo from "../lifukang/components/management_warehouseInfo/checkWarehouseInfo";
  import designatedWarehouse from "../lifukang/components/management_warehouseInfo/designatedWarehouse";
  import checkWarehouseDetailsInfo from "../lifukang/components/management_warehouseInfo/checkWarehouseDetailsInfo";
  import checkGatherInfo from "../lifukang/components/management_warehouseInfo/storageManagement/checkGatherInfo";
  import orderToSignFor from "../lifukang/components/management_warehouseInfo/storageManagement/orderToSignFor";
  import storageQuery from "../lifukang/components/management_warehouseInfo/storageManagement/storageQuery";
  //入库管理
  import storageManagementList from "../lifukang/components/management_warehouseInfo/storageManagement/storageManagementList";
  //供应商
  import supplier_info_change from "../lifukang/components/supplier/supplier_info_change";
  import supplier_check from "../lifukang/components/supplier/supplier_check";//注册供应商审核
  import supply_of_goods_check from "../lifukang/components/supplier/supply_of_goods_check";//供应商品审核
  //总店
  import AddShop from "../liwentao/shopview/AddShop"; //添加商品
  import ShopView from "../liwentao/shopview/ShopView"; //商品展示
  import ShopTypeView from "../liwentao/shopType/ShopTypeView"; //商品分类展示
  import AddShopType from "../liwentao/shopType/AddShopType"; //添加商品分类
  import AddPurchase from "../liwentao/purchase/AddPurchase"; //添加采购单
  import PurchaseView from "../liwentao/purchase/PurchaseView"; //显示所有采购单
  import AuditPurchase from "../liwentao/purchase/AuditPurchase"; //采购审核
  import checkReturn from "../liwentao/returnShop/checkReturn";
  import Authority from "./authority/Authority";
  import Roles from "./roles/Roles"; //角色
  import Users from "./users/Users";

  //菜单
  import menus from "../caoke/orders/menus";

  import MenusTyy from "./menus/MenusTyy";
  //商户
  import commercial_check from "../lifukang/components/commercial/commercial_check";
  //订单管理
  import OrderTabPaneBack from "../liwentao/orderViewBack/OrderTabPaneBack";
  import ReturnView from "../liwentao/returnShop/ReturnView";
  import StatisticalView from "../liwentao/ statistical/StatisticalView";
  //出库管理
  import deliveryOfCargoManagementList
    from "../lifukang/components/management_warehouseInfo/deliveryOfCargoManagement/deliveryOfCargoManagementList";
  import checkPayInfo from "../lifukang/components/management_warehouseInfo/deliveryOfCargoManagement/checkPayInfo";
  //流水管理
  import wageSettlementOfMerchants from "../lifukang/components/waterManagement/wageSettlementOfMerchants";
  import waterQuery from "../lifukang/components/waterManagement/waterQuery";
  export default {
        name: "SystemHome02",
        data(){
          return{
            loading:true,
            activelist:[],
            topImg:"",
            roleName:"",
            mid:"",
            activeIndex: '',
            childMenus:[],
            childMenus02:[],
            isCollapse: true,
            com:"",
            editableTabsValue: '1',
            editableTabs:[{
            title: '首页',
            name: '1',
            content: '老李头系统欢迎你!'}
            ],
            tabIndex:1
          }
        },
        components:{
          MenusTyy,
          menus,
          Staff,
          AddShop,
          ShopView,
          AddPurchase,
          PurchaseView,
          AuditPurchase,
          WarehouseInfoList,
          checkWarehouseInfo,
          designatedWarehouse,
          supplier_check,
          ShopTypeView,
          supply_of_goods_check,
          supplier_info_change,
          commercial_check,
          checkWarehouseDetailsInfo,
          storageManagementList,
          Roles,
          Authority,
          Users,
          checkGatherInfo,
          storageQuery,
          orderToSignFor,
          AddShopType,
          OrderTabPaneBack,
          ReturnView,
          StatisticalView,
          checkReturn,
          deliveryOfCargoManagementList,
          checkPayInfo,
          wageSettlementOfMerchants,
          waterQuery
       },
        methods:{
          getdata(){

            let SystemUsers = new URLSearchParams()

            SystemUsers.append("suName",sessionStorage.getItem("suName"))

            SystemUsers.append("suPwd",sessionStorage.getItem("suPwd"))

            this.$axios.post("SystemUsers.action",SystemUsers).
            then(request=>{
              this.childMenus = request.data
              console.log(request.data)
              this.activeIndex = this.childMenus[0].id+''

              this.getmenuid()
            }).
            catch()
          },
          handleOpen(key, keyPath) {
            //console.log(key, keyPath);
          },
          handleClose(key, keyPath) {
            //console.log(key, keyPath);
          },
          getmenuid(mid){
            this.loading=true
            let SystemUsers = new URLSearchParams()

            SystemUsers.append("suName",sessionStorage.getItem("suName"))

            SystemUsers.append("suPwd",sessionStorage.getItem("suPwd"))


              if (mid==undefined && mid==null){
                  SystemUsers.append("mid",this.activeIndex)
              }else {
                SystemUsers.append("mid",mid)
              }


            this.$axios.post("quertop.action",SystemUsers).
            then(request=>{
              console.log(request.data)
              this.childMenus02 = request.data
              this.loading=false
            }).
            catch()
          }
          ,
          addTab(targetName,valuename) {
            var arr = this.editableTabs.find(itme=>itme.title==targetName);
                if (arr!=null){
                  this.editableTabsValue=arr.name;  //选中
                  return ;
                }

            let newTabName = ++this.tabIndex + '';
            this.editableTabs.push({
              title: targetName,
              name: newTabName,
              content: valuename
            });

            this.editableTabsValue = newTabName;

            // this.editableTabs.forEach(item=>{
            //   if (item.title==targetName){
            //     this.com = item.content;
            //   }
            // })

          },
          active(targetName,valuename) {

            console.log(targetName,valuename)
            // let newTabName = ++this.tabIndex + '';
            // this.activelist.push({
            //   title: targetName,
            //   content: valuename
            // });
            //
            // this.editableTabsValue = newTabName;


          },
          removeTab(targetName) {
            let tabs = this.editableTabs;
            let activeName = this.editableTabsValue;
            if (activeName === targetName) {
              tabs.forEach((tab, index) => {
                if (tab.name === targetName) {
                  let nextTab = tabs[index + 1] || tabs[index - 1];
                  if (nextTab) {
                    activeName = nextTab.name;
                  }
                }
              });
            }

            this.editableTabsValue = activeName;
            this.editableTabs = tabs.filter(tab => tab.name !== targetName);
          },
          //注销
          write(){
            sessionStorage.clear();
            this.open3
            this.$router.push("/adminlogin")
          },
          open3() {
            this.$notify({
              title: '注销成功',
              message: '成功',
              position: 'bottom-left',
              type: 'success'
            });
          },
          getid(){
            //this.roleName = ""
            let id = sessionStorage.getItem("suid")
            let users = new URLSearchParams()
            users.append("id",id)
            this.$axios.post("querybyid_Systemuser.action",users).
            then(request=>{
              //console.log( request.data)
              this.ruleForm = request.data;

              if (request.data.topImg!=null &&   request.data.topImg!=""){
                  this.topImg = request.data.topImg
              }else {
                this.topImg = "未上传头像"
              }

              if (request.data.roles!=null && request.data.roles!=""){
                this.roleName = request.data.roles.roleName
              }else {
                this.roleName = "暂无角色"
              }

              //this.ruleForm.roleName = request.data.roles.roleName

            }).
            catch();

          }
        },
          created() {
            this.getdata()
            this.$nextTick(item=>{
              this.getid()
            })
          }
    }
</script>

<style scoped>
    #app{
      height: 100%;

      width: 100%;
      height: 100%;
    }
    .el-menu-vertical-demo:not(.el-menu--collapse) {
      width: 200px;
      min-height: 400px;
    }


    /*.el-header, .el-footer {*/
    /*  background-color: #B3C0D1;*/
    /*  color: #333;*/
    /*  text-align: center;*/
    /*  line-height: 60px;*/
    /*}*/

    .el-aside {
      background-color: #545c64;
      text-color:"#fff";
      active-text-color:"#ffd04b";
      text-align: center;
      line-height: 200px;
    }
    .el-main {

      background-color: #efefef;
      text-align: center;
      line-height: 160px;
    }

    body > .el-container {
      margin-bottom: 40px;
    }

    .el-container:nth-child(5) .el-aside,
    .el-container:nth-child(6) .el-aside {
      line-height: 260px;
    }

    .el-container:nth-child(7) .el-aside {
      line-height: 320px;
    }

    .homeWrap {
      position: absolute;
      top: 0;
      left: 0;
      width:100%;
      height: 100%;
    }



</style>
